<template>
    <div class="back_ground">
        <van-image round :src="img" />
        <div class="user_name">xiao piu_</div>

    </div>

    <ul>
        <li><van-icon id="vip" name="vip-card" />个人资料 <van-icon id="arrow" name="arrow" /></li>
        <li @click="goCoffeeWallet"> <van-icon id="coupon" name="coupon" />咖啡钱包 <van-icon id="arrow" name="arrow" />
        </li>
        <li><van-icon id="send" name="send-gift" />优惠券&nbsp;<van-icon id="arrow" name="arrow" /></li>
        <li><van-icon id="point" name="point-gift" />兑换优惠 <van-icon id="arrow" name="arrow" /></li>
        <li><van-icon id="todo" name="todo-list" />发票管理 <van-icon id="arrow" name="arrow" /></li>
    </ul>




    <FooterVue></FooterVue>
</template>

<script setup>
import FooterVue from '@/components/home/footer/Footer.vue';

import img from '@/assets/headPortrait.jpg'

import { Image as VanImage, } from 'vant';
// import { ref } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()
const goCoffeeWallet = () => {
    router.push('/coffeewallet')
}
</script>

<style lang="scss" scoped>
ul li {
    position: relative;
    margin: 0 auto;
    width: 300px;
    height: 80px;
    border-bottom: 1px solid #000;
    color: rgba(56, 56, 56, 1);
    font-size: 18px;
    text-align: start;
    line-height: 80px;

    #vip {
        margin-right: 10px;
    }

    #coupon {
        margin-right: 10px;
    }

    #send {
        margin-right: 10px;
    }

    #point {
        margin-right: 10px;
    }

    #todo {
        margin-right: 10px;
    }

    #arrow {
        position: absolute;
        right: 20px;
        bottom: 40px;
    }
}

.back_ground {
    width: 375px;
    height: 180px;
    background-color: rgba(100, 68, 60, 1);

    .user_name {
        width: 91px;
        height: 27px;
        // left: 85px;
        // top: 86px;
        margin-left: 90px;
        margin-top: 20px;
        color: rgba(255, 255, 255, 1);
        font-size: 18px;
        line-height: 150%;
        text-align: left;
    }
}

.van-image {
    width: 55px;
    height: 55px;
    left: 20px;
    top: 72px;
    border-radius: 28px;

}

#myPicture {
    width: 335px;
    height: 114px;
    left: 20px;
    top: 8px;
}
</style>